<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/css/element.css">
    <link rel="stylesheet" href="/editor/css/style.css" />
    <link rel="stylesheet" href="/editor/css/editormd.css" />
    <script src="/editor/js/jquery.min.js"></script>
    <script src="/editor/js/editormd.min.js"></script>
    <#include "/include/commonjs.html">
    <title>内容更新</title>
</head>
<body>
<div id="app">

    <#include "/include/daohang.html">
    <div style="background-color: white;padding: 20px;border-radius: 15px">

        <div style="padding: 20px">
            <el-form :model="form"  label-width="60px" class="demo-ruleForm" :rules="rules" ref="form">
                <el-row>
                    <el-col :span="20">
                        <el-form-item label="标题: " prop="title">
                            <el-input placeholder="请输入标题" v-model="form.title" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-button type="primary" @click="submitFrom('form')">更新</el-button>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="10">
                        <el-form-item label="标签: " prop="tags" >
                            <el-input placeholder="请输入标签" v-model="form.tags"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="栏目: " prop="channelId" >
                            <el-cascader
                                    v-model="form.channelId"
                                    :options="data"
                                    :props="props"
                                    style="width: 100%"
                                    :clearable="true"
                                    @change="handleChange_channel">
                            </el-cascader>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <br>

            <div id="test-editormd" style="padding: 20px">
                <textarea id="content-main"  style="display:none;">{{content}}</textarea>
            </div>
            <br><br>
        </div>
    </div>
</div>

<script type="text/javascript">
    var testEditor;



    var Main = {
        extends: global,
        data() {
            return{
                activeIndex: '2',
                activeIndex2: '2',
                form:{
                    title:'',
                    tags:''
                },
                title:'标题',
                tag:'标签',
                content:'内容',
                formLabelWidth:'120px',
                restaurants: [],
                state: '',
                select: '',
                data: [],
                props:{
                    children: 'childs',
                    label: 'channelname',
                    value:'id',
                    checkStrictly:true,
                    emitPath:false
                },
                rules: {
                    title: [
                        {required: true, message: '请输入标题', trigger: 'blur'},
                        {min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur'}
                    ],
                    tags: [
                        {required: true, message: '请输入标签', trigger: 'blur'},
                        {min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur'}
                    ],
                    channelId:[
                        {required: true, message: '请选择栏目id', trigger: 'blur'},
                    ],
                }
            }
        },
        created(){
            this.getChannel();
            var result=api.URLAjax('get','/note/get',{'nid':${id} });
            this.form.title=result.data.title;
            this.form.tags=result.data.tag;
            this.form.channelId=parseInt(result.data.channelid);
            this.content=result.data.content;
        },
        methods: {
            submitFrom(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        //获取富文本
                        var content=$("#content-main").val();
                        var data={'title':this.form.title,'content':content,'tag':this.form.tags,'channelId':this.form.channelId,'id':${id}};
                        api.POST('/note/update',data,(result)=>{
                            if (result.code==0){
                                this.$message({
                                    showClose: true,
                                    message: '添加成功',
                                    type: 'success'
                                });
                                window.location.href='/update?id=${id}';
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            handleChange_channel(val){
                console.log(val)
            },
            getChannel(){
                api.GET('/channel/getallchannel',null,(res)=>{
                    if(res.code===0){
                        this.data=res.data;
                    }
                })
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')

    $(function() {
        testEditor = editormd("test-editormd", {
            width   : "100%",
            height  : 640,
            syncScrolling : "single",
            path    : "/editor/lib/",
            saveHTMLToTextarea : true ,// 保存 HTML 到 Textarea
            htmlDecode: "style,script,iframe"
        });
    });

</script>
</body>
</html>